<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/multiple-select.css" />
    <!-- Data Tables -->
    <link rel="stylesheet" href="css/plugins/dataTables/dataTables.bootstrap.css"/>
    <link rel="stylesheet" href="css/jedate.css"/>
    <link href="css/plugins/chosen/chosen.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/index_jqjh.css"/>
    <link rel="stylesheet" href="css/pager.css"/>
    <link rel="stylesheet" href="css/index_jqjh_1.css"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div id="vue-temp-1" v-cloak>
            <div class="row">
                <div class="col-sm-9" style="width: 100%;margin-left: 0;">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="margin-bottom: 20px;">
                            <div class="search-div">
                                <div role="form" class="clearfix min-height">
                                    <h3>选择搜索条件：</h3>
                                    <div class="form-group inline">
                                        <label >一级名称：</label>
                                        <select  class="chosen-select chosen-select-yiji block"  style="display:none;">
                                            <option value="" >--</option>
                                            <option v-for="i in yiji" :value="i.id" :key="i.id" >{{i.zjkName}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group inline">
                                        <label >二级名称：</label>
                                        <select  class="chosen-select chosen-select-view block" ref="selectView" style="display:none;">
                                            <!--<option value="">&#45;&#45;</option>-->
                                            <option v-for="i in unitsAll" :selected="i.selected" :value="i.unitId" :key="i.id" >{{i.unitName}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group inline">
                                        <label for="inpstart">时段：</label>
                                        <div class="jeDate-wrap">
                                            <input type="text" class="form-control workinput wicon" id="inpstart" placeholder="选择起始日期" readonly>
                                            <span>至</span>
                                            <input type="text" class="form-control workinput wicon" id="inpend" placeholder="选择终止日期" readonly>
                                            <input type="text" class="form-control workinput wicon" id="inpStartHour" placeholder="选择起始小时" readonly>
                                            <input type="text" class="form-control workinput wicon" id="inpEndHour" placeholder="选择终止小时" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group inline">
                                        <label for="level">警情级别：</label>
                                        <select data-placeholder="来源" class="chosen-select chosen-select-jb block" id="level" style="display:none;">
                                            <option value="" selected>--</option>
                                            <option value="1">1级</option>
                                            <option value="2">2级</option>
                                            <option value="3">3级</option>
                                        </select>
                                    </div>
                                    <!-- 三级联动选择 -->
                                    <div class="form-group inline" type="caseTypes" itemIdName="caseTypeId">
                                        <label>案件类型：</label><!--multiple js也要改一些-->
                                        <select class="multiple-select caseTypesSelectHock block" ref="caseTypesAll" multiple data-placeholder="">
                                            <option v-for="i in caseTypesAll" :value="i.id" :selected="i.selected" :key="i.id" >{{i.typeName}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group inline" type="caseClasses" itemIdName="caseClassId">
                                        <label>案件类别：</label>
                                        <select class="multiple-select caseClassesSelectHock block" ref="caseClassesAll" multiple data-placeholder="" >
                                            <option v-for="i in caseClassesAll" :selected="i.selected" :value="i.id" :key="i.id">{{i.typeName}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group inline" type="caseSmallClasses" itemIdName="caseSmallClassId">
                                        <label>案件细类：</label>
                                        <select class="multiple-select caseSmallClassesSelectHock block" multiple ref="caseSmallClassesAll" data-placeholder="" >
                                            <option v-for="i in caseSmallClassesAll" :selected="i.selected" :value="i.id" :key="i.id">{{i.typeName}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group inline">
                                        <label>模糊查询：</label>
                                        <input v-model="inputValue" placeholder="地址、流水号、摘要、报警电话、报警人" class="form-control input-search" style="width: 330px" />
                                    </div>
                                    <br />
                                    <div class="input-wrapper">
                                      <div class="input-group input-text">
                                        <span class="input-group-addon input-span-fonte" >警情标签</span>
                                        <input v-model="scbz" type="text" class="form-control" > 
                                      </div>
                                    </div>
                                    <div class="input-wrapper">
                                      <div class="input-group input-text">
                                        <span class="input-group-addon input-span-fonte" >流水号</span>
                                        <input v-model="hjlsh" type="text" class="form-control" > 
                                      </div>
                                    </div>
                                    <div class="input-wrapper">
                                      <div class="input-group input-text">
                                        <span class="input-group-addon input-span-fonte" >报警电话</span>
                                        <input v-model="bJDH" type="text" class="form-control ">
                                      </div>
                                    </div>
                                    <div class="input-wrapper">
                                      <div class="input-group input-text">
                                        <span class="input-group-addon input-span-fonte" >报警人姓名</span>
                                        <input v-model="bjrxm" type="text" class="form-control ">
                                      </div>
                                    </div>
                                    <div class="input-wrapper input-text-long">
                                      <div class="input-group ">
                                        <span class="input-group-addon input-span-fonte" >报警地址</span>
                                        <input v-model="afdd" type="text" class="form-control ">
                                      </div>
                                    </div>
                                    <div class="input-wrapper input-text-zhaiyao">
                                      <div class="input-group ">
                                        <span class="input-group-addon input-span-fonte" >报警摘要</span>
                                        <input v-model="bjnr" type="text" class="form-control ">
                                      </div>
                                    </div>
                                    <button class="btn btn-primary input-wrapper" id="plsCarTpSch" @click="search">查询</button>
                                    <button  class="btn btn-primary input-wrapper" v-show="zhanshi"  @click="download">下载</button>
                                </div>
                                <div class="ibox-content" v-show="zhanshi" style="margin-top: -20px">

                                    <table v-show="list.length != 0" class="table table-striped table-bordered table-hover dataTables-example">
                                        <thead>
                                        <tr>
                                            <th style="width: 200px">案发地址</th>
                                            <th >警情摘要</th>
                                            <th style="width: 160px">流水号</th>
                                            <!--<th>分局</th>-->
                                            <th style="width: 90px">案件类型</th>
                                            <!--<th>案件类别</th>-->
                                            <!--<th>案件细类</th> &ndash;&gt;-->
                                            <th style="width: 69px">接警警察</th>
                                            <th style="width: 82px">报警人姓名</th>
                                            <th style="width: 125px">报警人电话</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(i, index) in list" :key="index" @dblclick="popDetails(index)" >
                                            <td :title="i.afdd">{{i.afdd}}</td>
                                            <td :title="i.bjnr">{{i.bjnr}}</td>
                                            <td>{{i.hjlsh}}</td>
                                            <!--<td>{{i.name}}</td>-->
                                            <!-- <td>{{i.jjdwdm}}</td> -->
                                            <!--<td>{{i.bjlbdm}}</td>-->
                                            <td>{{i.caseTypeName}}</td>
                                            <!--<td>{{i.bjlxdm}}</td>-->
                                            <!--<td class="center">{{i.bjxldm}}</td>-->
                                            <td>{{i.jjyxm}}</td>
                                            <td>{{i.bjrxm}}</td>
                                            <td>{{i.bJDH}}</td>
                                        </tr>

                                        </tfoot>
                                    </table>
                                    <div>
                                        <ul class="pagination" id="page1">
                                        </ul>
                                        <div class="pageJump">
                                            <span>跳转到</span>
                                            <input type="text" style="width: 70px"/>
                                            <span>页</span>
                                            <button type="button" class="button">确定</button>
                                        </div>
                                    </div>

                                    <div class="echarts">
                                        <div id="myChart" :style="{width:'900px', height:'300px'}"></div>
                                    </div>
                                </div>
                            </div>
                            <!--<input type="text" class="search" id="searchText2" placeholder="请输入所属部门id"  style="width: 16%;margin-right: 1%;"/>-->
                            <!--<input type="text" class="search" id="searchText3" placeholder="请输入资源类型编码" style="width: 16%;margin-right: 1%;"/>-->
                        </div>
                    </div>
                </div>
                <div class="pop-detailsWrapper" @click="hideDetails" v-if="detailsTarget" >
                    <div class="pop-details">
                        <p><span>案发地点:</span>{{detailsContent.afdd}}</p>
                        <p><span>报警电话:</span>{{detailsContent.bJDH}}</p>
                        <p><span>报警内容:</span>{{detailsContent.bjnr}}</p>
                        <p><span>报警人姓名:</span>{{detailsContent.bjrxm}}</p>
                        <p><span>报警时间:</span>{{detailsContent.bjsj}}</p>
                        <p><span>案件类型:</span>{{detailsContent.caseTypeName}}</p>
                        <p><span>重复报警:</span>{{detailsContent.cfbj != 0?'重复报警':'非重复报警'}}</p>
                        <p><span>处警标识:</span>{{detailsContent.cjbs != 0?'已处警':'未处警'}}</p>
                        <p><span>呼叫流水号:</span>{{detailsContent.hjlsh}}</p>
                        <p><span>接警时长:</span>{{detailsContent.jjsc}}</p>
                        <p><span>接警台编号:</span>{{detailsContent.jjtbh}}</p>
                        <p><span>接警员姓名:</span>{{detailsContent.jjyxm}}</p>
                        <p><span>警情级别:</span>{{detailsContent.jqjb}}</p>
                        <p><span>报警人联系电话:</span>{{detailsContent.lxdh}}</p>
                        <p><span>首次上传时间:</span>{{detailsContent.scscsj}}</p>
                        <p><span>是否人工生成:</span>{{detailsContent.sfrgsc == 0 ? "非人工生成":"人工生成"}}</p>
                        <p><span>数据更新时间:</span>{{detailsContent.sjgxsj}}</p>
                        <p><span>行政区划:</span>{{detailsContent.xzqh}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="js/vue.js?v=1.0.0"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/multiple-select.js"></script>
<script type="text/javascript" src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/plugins/chosen/chosen.jquery.js"></script>
<script type="text/javascript" src="js/plugins/echarts/echarts-all.js"></script>
<script type="text/javascript" src="js/jquery.jedate.min.js"></script>
<script src="js/common/config.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/content.js"></script>
<script type="text/javascript" src="js/controllerJs/pager.js"></script>
<script type="text/javascript" src="js/controllerJs/index_jqjh_1.js"></script>

</div>
</body>


</html>